<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>商品</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_608853_ykjxktkf2agojemi.css">

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="/static/mui/css/mui.min1.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <style>
        .headTitle {
            position: fixed;
            border: 1px solid #f4f4f4;
            border-top: none;
            border-left: none;
            border-right: none;
            background: #fff;
            width: 100%;
            height: 44px;
            line-height: 44px;
        }
        .head {
            position: absolute;
            width: 100%;
            max-width: 640px;
            right: 0;
            margin: 0 auto;
            height:44px;
            background: rgb(255, 255, 255);
            top: 0;
            left: 0;
            z-index: 3;
        }
        .head .title1 {
            text-align: center;
            font-size: 17px;
            margin: 0 8%;
            font-style: normal;
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 100%;


        }
        .head a img {
            float: left;
            display: block;
            width: 100%;
            width: 10px;
            height: 16px;
            margin-left: 5%;
            margin-top: 14px;
        }
        .sousuo{
            position: absolute;top:0px;right:4%;color: black
        }
        #img li a img {
            width: 100%;
            height: 130px
        }
        .shaixuan {
            text-align: center;
            height: 45px;
            width: 100%;
            line-height: 30px;
            clear: both;
            background-color: #fff
        }
        .shaixuan ul {
            margin-left: 4%;
        }

        .shaixuan ul li {
            float: left;
            list-style: none;
            width: 32%;
            height: 30px;
            margin-top: 5px;
            color: gray;
            font-size: 15px;
        }
        .mui-media-body {
            margin-left: 5%
        }

        .sure {
            display: none;
            position: fixed;
            top: 88px;
            left: 0;
            z-index: 2;
            width: 100%;
        }

        .sure ul {
            max-height: 25.144rem;
            background: rgba(255, 255, 255, 0.94);
            overflow: auto;
        }

        .sure ul li {
            border-bottom: 1px solid #DEE0E9;
            padding: 0 1.643rem;
            height: 3.143rem;
            line-height: 3.143rem;
            color: #999;
            font-size: 0.9375rem;
        }

        .sure ul li.active {
            background: #DBDBDB;
        }

        .zzk {
            display: none;
            position: fixed;
            top: 81px;
            left: 0;
            bottom: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            overflow: auto;
            background: rgba(0, 0, 0, 0.5);
        }

    </style>
</head>
<body ontouchstart>
<!--头部-->
<header class="head headTitle" style="   position :fixed;  top:0;text-align: center;border: 0px">
    <a class="back" href="{:url('/home/shouye/shouye')}"><img src="/static/images/back_gray.png" alt="返回"></a>
    <span style="margin-right: 8%">商品</span>
    <a class="sousuo" href="{:url('/home/Goods/sousuo')}" style="color: black;top:1px;"><span class="sp sp-sousuo" style="color: gray"></span></a>
    <!--商品筛选-->
    <div class="shaixuan">
        <ul style="background-color: white;">
            <li style="border-right: 0px;display: block" class="fl" id="flzzk">分类
                <span class="sp sp-jiantouxia" id="jtx1"></span>
                <span class="sp sp-jiantoushang" id="jts1" style="display: none"></span>
            </li>
            <li class="wz">位置
                <span class="sp sp-jiantouxia" id="jtx3"></span>
                <span class="sp sp-jiantoushang" id="jts3" style="display: none"></span>
            </li>
            <li style="border-right: 0px" class="pp">排序
                <span class="sp sp-jiantouxia" id="jtx2"></span>
                <span class="sp sp-jiantoushang" id="jts2" style="display: none"></span>
            </li>

        </ul>
    </div>
</header>
<div id="app">
        <!--筛选结果-->
        <div class="result" style="margin-top: 88px;position: absolute;text-align: left;overflow: auto;width: 100%;height: 100%">
            <ul class="mui-table-view mui-grid-view" id="img" style="background-color: rgb(239,239,244)">

                <li v-for="(item,index) in items"  class="mui-table-view-cell mui-media mui-col-xs-6" :data_id="item.id"
                    style="background-color: rgb(239,239,244);padding: 10px 0 0 11px;"  onclick="spxq(this)">
                    <a href="#">
                        <div style="background-color: #fff;border: 0px solid red;height:235px ">
                            <img v-if="item.thumb=='null'" class="mui-media-object" src="/res/img/thumb.png">
                            <img v-else class="mui-media-object" :src="item.thumb">
                            <div class="mui-media-body" style="">{{item.name}}</div>
                            <div class="mui-media-body " style="color: gray;font-size: 13px">型号：{{item.xinghao}}</div>
                            <div class="mui-media-body " style="color: gray;font-size: 13px">品牌：{{item.pinpai.pinpai}}</div>
                            <div class="mui-media-body" style="color: gray;font-size: 13px;">材质：{{item.caizhi}}</div>
                        </div>
                    </a></li>

            </ul>
            <!--滚动加载-->
            <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>

            <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>
        </div>

        <!--筛选样式-->
        <div class="sure" id="fl">
            <ul>
                <li onclick="shaixuan()">不限</li>
                <li onclick="shaixuan()">开关</li>
                <li onclick="shaixuan()">门</li>
                <li onclick="shaixuan()">窗帘</li>
                <li onclick="shaixuan()">地板</li>
                <li onclick="shaixuan()">油漆</li>
                <li onclick="shaixuan()">锁</li>
                <li onclick="shaixuan()">插座</li>
            </ul>
        </div>
        <div class="sure" id="wz">
            <ul>
                <li onclick="shaixuan()">不限</li>
                <li onclick="shaixuan()">客厅</li>
                <li onclick="shaixuan()">厨房</li>
                <li onclick="shaixuan()">卧室</li>
                <li onclick="shaixuan()">洗漱台</li>
                <li onclick="shaixuan()">阳台</li>
                <li onclick="shaixuan()">浴室</li>
            </ul>
        </div>
        <div class="sure" id="pp">
        <ul>
            <li onclick="shaixuan()">默认排序</li>
            <li onclick="shaixuan()">最新发布</li>
        </ul>
    </div>
        <!--筛选框遮罩-->
        <div class="zzk" id="zzkfl">

        </div>
        <div class="zzk" id="zzkwz">

        </div>
        <div class="zzk" id="zzkpp">

    </div>
</div>

<script>
    var fl="不限";
    var pp="默认排序";
    var wz="不限";
    <!--商品详情-->
    function spxq(that) {
        console.log("232");
        var id=$(that).attr('data_id');
        var s="goods_details/id/"+id;
        location.href=s;
    }
    <!--筛选框-->
    $(function () {
        $('.fl').click(function () {
            $('#zzkfl').toggle();
            $('#zzkpp').hide();
            $('#zzkwz').hide();
            $('#fl').toggle();
            $('#jts1').toggle();
            $('#jtx1').toggle();
            $('#jtsfl').toggle();
            $('#jtxfl').toggle();
            $('#jtxpp').show();
            $('#jtspp').hide();
            $('#jtxwz').show();
            $('#jtswz').hide();
            $('#pp').hide();
            $('#jts2').hide();
            $('#jtx2').show();
            $('#wz').hide();
            $('#jts3').hide();
            $('#jtx3').show();
        })
        $('.pp').click(function () {
            $('#zzkpp').toggle();
            $('#zzkfl').hide();
            $('#zzkwz').hide();
            $('#pp').toggle();
            $('#jts2').toggle();
            $('#jtx2').toggle();
            $('#jtspp').toggle();
            $('#jtxpp').toggle();
            $('#jtxfl').show();
            $('#jtsfl').hide();
            $('#jtxwz').show();
            $('#jtswz').hide();
            $('#fl').hide();
            $('#jts1').hide();
            $('#jtx1').show();
            $('#wz').hide();
            $('#jts3').hide();
            $('#jtx3').show();
        })
        $('.wz').click(function () {
            $('#zzkwz').toggle();
            $('#zzkpp').hide();
            $('#zzkfl').hide();
            $('#wz').toggle();
            $('#jts3').toggle();
            $('#jtx3').toggle();
            $('#jtswz').toggle();
            $('#jtxwz').toggle();
            $('#jtxfl').show();
            $('#jtsfl').hide();
            $('#jtxpp').show();
            $('#jtspp').hide();
            $('#pp').hide();
            $('#jts2').hide();
            $('#jtx2').show();
            $('#fl').hide();
            $('#jts1').hide();
            $('#jtx1').show();
        })

        $('.zzk').click(function () {
            $('.zzk').hide();
            $('#fl').hide();
            $('#pp').hide();
            $('#wz').hide();
            $('#jts1').hide();
            $('#jtx1').show();
            $('#jts2').hide();
            $('#jtx2').show();
            $('#jts3').hide();
            $('#jtx3').show();
            $('#jtsfl').hide();
            $('#jtxfl').show();
            $('#jtspp').hide();
            $('#jtxpp').show();
            $('#jtswz').hide();
            $('#jtxwz').show();
        })
    })
    <!--选中事件-->
    $(function () {

        $("#fl ul li").each(function (index, item) {
            $(item).bind("click", function () {

                $(".fl").html($(this).text()).append('<span class="sp sp-jiantouxia" id="jtxfl" style="margin-left:3px "></span>' +
                    ' <span class="sp sp-jiantoushang" id="jtsfl" style="display: none;margin-left: 3px"></span>');
                $('#fl').hide();
                $('.zzk').hide();
                // var str = "";//定义div里所有li的值组成的字符串
                // var li = new Array();//定义一个数组，用来存放每一个li的值
                // li[item] = $(this).text();
                // str = li.join(",");
                var text = $(this).text();
            });
        });
        $("#pp ul li").each(function (index, item) {
            $(item).bind("click", function () {

                $(".pp").html($(this).text()).append('<span class="sp sp-jiantouxia" id="jtxpp" style="margin-left:3px "></span>' +
                    ' <span class="sp sp-jiantoushang" id="jtspp" style="display: none;margin-left: 3px"></span>');
                $('#pp').hide();
                $('.zzk').hide();
            });
        });
        $("#wz ul li").each(function (index, item) {
            $(item).bind("click", function () {
                $(".wz").html($(this).text()).append('<span class="sp sp-jiantouxia" id="jtxwz" style="margin-left:3px "></span>' +
                    ' <span class="sp sp-jiantoushang" id="jtswz" style="display: none;margin-left: 3px"></span>');
                $('#wz').hide();
                $('.zzk').hide();
            });
        });
    });
    <!--滚动加载-->
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            cur_page: 1,
            limit: 10,
        },
    });
    //滚动加载更多
    $(function () {
        //进入加载页面
        loadlist();
    });
    $('.result').infinite().on('infinite', function () {
        console.log("加载");
        loadlist();
    });
    // 请求数据
    function shaixuan() {
        $(document).ready(function () {
            $('#fl ul').on('click', 'li', function () {

                fl = $(this).text();
                console.log("fl"+fl);
                app.cur_page=1;
                app.limit=10;
                loadlist();

            })
        })
        $(document).ready(function () {
            $('#pp ul').on('click', 'li', function () {

                pp = $(this).text();
                console.log("pp"+pp);
                app.cur_page=1;
                app.limit=10;
                loadlist();
            })
        })
        $(document).ready(function () {
            $('#wz ul').on('click', 'li', function () {
                wz = $(this).text();
                console.log("wz"+wz);
                app.cur_page=1;
                app.limit=10;
                loadlist();
            })
        })
    }
    //ajax加载数据
    function loadlist() {

        if (!app.is_loading && app.is_none != true) {
            app.is_loading = true;
            $.post('loaddata', {page: app.cur_page, limit: app.limit,fl: fl,pp:pp,wz:wz}, function (res) {
                console.log(res);
                app.is_loading = false;
                if (res.count > 0) {
                    $('.result').show();
                    if(app.cur_page==1){
                         app.items=res.data;
                    }else {
                        for (var index in res.data) {
                            app.items.push(res.data[index]);
                        }
                    }


                    app.cur_page++;


                } else {
                    app.is_none = true;
                }

            });
        }

    }

</script>
</body>
</html>
